<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OpSystem</title>
    <link rel="Shortcut Icon" href="/static/image/ico.png" />
    <link rel="stylesheet" type="text/css" href="/static/css/opp.css"/>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
        $("button").click(function(){
            $("#left").toggleClass("partleft")
            $("#right").toggleClass("fullright")
    });
});
</script>
</head>
<body>

    <div class="header">
    <div id="logo"></div>
        {% if username %}
        <span id="username">Hi~ {{username}}</span>
        {% else %}
            <p>Sign in please!</p>
        {% endif %}
    </div>
        <div id="left" class="fullleft">
            <iframe id="menu" name="menu" src="/static/index_menu.html" scrolling="no" marginheight="0" marginwidth="0"  frameborder="0"></iframe>
            <div id="fadebutton"><button type="button" style="height:60px;"><</button> </div>
        </div>
        <div id="right" class="partright">

            <iframe id="showpage" name="showpage" src="/static/index_show.html" scrolling="no" marginheight="0" marginwidth="0" frameborder="0"></iframe>
        </div>


</body>
</html>